<template>
    <div class="amap-page-container">
        <iframe :src="apiUrl" class="amap-avigation" id="amap-navigation"></iframe>
    </div>
</template>

<style scoped lang="stylus">
    .amap-demo, .amap-page-container
        height: 300px;
        font-size:0.3rem;
    .amap-avigation {
        width: 100%;
    }
</style>

<script>
  import {amapKey} from './config';
  import {printf} from './utils';

  /**
   * <amap-navigation :start="start" :dest="dest" :destName="destName" :naviBy="naviBy" reduce="50"></amap-navigation>
   * start 起始坐标 array
   * dest 目标坐标 array
   * destName 目标名称 string
   * naviBy 交通方式 string
   * reduce 高度减少像素，用于空出头尾 int
   * @see http://lbs.amap.com/api/lightmap/guide/line
   */
  export default {
    name: 'amap-avigation',
    data() {
      return {};
    },
    computed: {
      apiUrl() {
        let apiUrl = '//m.amap.com/navi/?start={0}&dest={1}&destName={2}&naviBy={3}&key={4}';
        let start = this.start ? this.start.join(',') : '';
        if (start === ',') {
          start = ''
        }
        let dest = this.dest ? this.dest.join(',') : ''
        if (dest === ',') {
          dest = ''
        }
        let destName = this.destName ? this.destName : '目的地';
        let naviBy = this.naviBy ? this.naviBy : 'car';
        return printf(apiUrl, start, dest, destName, naviBy, amapKey)
      }
    },
    props: {
      start: {
        type: Array,
        required: true
      },
      dest: {
        type: Array,
        required: true
      },
      destName: {
        type: String
      },
      naviBy: {
        type: String
      },
      reduce: {
        type: Number
      }
    },
    mounted() {
      this.$nextTick(function () {
        let width = Math.max(document.body.scrollWidth, document.body.clientWidth);
        let height = Math.max(document.body.scrollHeight, document.body.clientHeight);
        let iframe = document.getElementById('amap-navigation');
        let reduce = this.reduce ? this.reduce : 0;
        iframe.height = height - reduce;  // 这里通过hash传递b.htm的宽高
      })
    }
  };
</script>